<template>
	<view class="orderdetail">
		<view class="orderdetail-part1">
			<view class="orderdetail-part1-top">
				<view class="orderdetail-part1-top-tips">
					<view class="orderdetail-part1-top-tips-part">
						<view class="orderdetail-part1-top-tips-part-title1">
							<image src="../static/orderdetails/recommend.png" mode="widthFix" style="width: 58rpx;margin-left: 20rpx; margin-top: 20rpx;"></image>
							<text style="margin-left: 20rpx;">退款成功</text>
						</view>
						<view class="orderdetail-part1-top-tips-part-title2">
							<text style="margin-left: 98rpx;">你的订单已退款，已退回冻结押金￥4.00</text>
						</view>
					</view>
				</view>
			</view>
			<view class="orderdetail-part1-bottom">
				<view class="sureorder-top">
					<view class="sureorder-top-part">
						<view class="sureorder-top-part-connet">
							<view class="sureorder-top-part-connet-left">
								<image src="../static/sureorder/address.png" mode="widthFix" style="width: 40rpx;"></image>
							</view>
<!-- 							<view class="sureorder-top-part-connet-right">
								<view class="sureorder-top-part-connet-right-connet">
									<view class="sureorder-top-part-connet-right-connet-top">
										<text style="color: red;">*</text>
										<text>无</text>
									</view>
									<view class="sureorder-top-part-connet-right-connet-bottom">
										<text>请完善地址</text>
									</view>
								</view>
								<view class="sureorder-top-part-connet-right-icon">
									<image src="../../static/suggest/right.png" mode="widthFix" style="width: 40rpx;"></image>
								</view>
							</view> -->
							<view class="sureorder-top-part-connet-right2">
								<view class="sureorder-top-part-connet-right2-title">
									<text>收货人：某某某</text>
									<text>12345678900</text>
								</view>
								<view class="sureorder-top-part-connet-right2-connet">
									<text>地址:广东省广州市天河区广东省-广州市-天河区-棠下街道达善大街xx号</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="orderdetail-part2">
			<view class="orderdetail-part2-connet">
				<view class="orderdetail-part2-connet-top">
					<view class="orderdetail-part2-connet-top-left">
						<image src="../static/order/shop-icon.png" style="width: 56rpx;height: 56rpx; margin-left: 20rpx;"></image>
						<text style=" margin-left: 20rpx;">挺想租</text>
					</view>
					<view class="orderdetail-part2-connet-top-right">
						<image src="../static/suggest/more.png" style="width: 24rpx; height: 32rpx;margin-right: 20rpx;"></image>
					</view>
				</view>
				<view class="orderdetail-part2-connnet-connet">
					<view class="orderdetail-part2-connet-connet-img">
						<image src="../static/20221011165448.jpg" mode="widthFix" style="width: 160rpx;"></image>
					</view>
					<view class="orderdetail-part2-connnet-connet-text">
						<view class="orderdetail-part2-connnet-connet-text-list">
							<text style="font-size: 32rpx; color: black;">测试商品QQ</text>
						</view>
						<view class="orderdetail-part2-connnet-connet-text-list">
							<text>套餐：128G 黑色</text>
						</view>
						<view class="orderdetail-part2-connnet-connet-text-list">
							<text>租期：2022.12.12-2023.12.12</text>
						</view>
						<view class="orderdetail-part2-connnet-connet-text-list">
							<text>数量：1</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="orderdetail-part3">
			<view class="orderdetail-part3-part">
				<text style="margin-left: 20rpx;color: black;">租赁套餐</text>
				<text style="margin-right: 20rpx;">租完归还/续租/买断</text>
			</view>
		</view>
		<view class="orderdetail-part4">
			<view class="orderdetail-part4-part">
				<view class="orderdetail-part4-part-top">
					<text style="margin-left: 20rpx;">首期实付金额</text>
					<text style="margin-right: 20rpx; color: red;">￥1.20</text>
				</view>
				<view class="orderdetail-part4-part-connet">
					<view class="orderdetail-part4-part-connet-part">
						<view class="orderdetail-part4-part-connet-part-list" >
							<text style="margin-left: 20rpx;">总租金</text>
							<text style="margin-right: 20rpx;">￥1.20</text>
						</view>
						<view class="orderdetail-part4-part-connet-part-list" style="color: #7f7f7f;">
							<text style="margin-left: 20rpx;">首期租金</text>
							<text style="margin-right: 20rpx;">￥1.20</text>
						</view>
						<view class="orderdetail-part4-part-connet-part-list" style="color: #7f7f7f;">
							<text style="margin-left: 20rpx;">已还租期</text>
							<text style="margin-right: 20rpx;">￥1.20</text>
						</view>
						<view class="orderdetail-part4-part-connet-part-list" style="color: #7f7f7f;">
							<text style="margin-left: 20rpx;">剩余租期</text>
							<text style="margin-right: 20rpx;">￥1.20</text>
						</view>
					</view>
				</view>
				<view class="orderdetail-part4-part-top" @click="ToOrderdetail()">
					<text style="margin-left: 20rpx;">账单详情</text>
					<image src="../static/suggest/more.png" style="width: 24rpx; height: 32rpx;margin-right: 20rpx;"></image>
				</view>
			</view>
		</view>
		<view class="orderdetail-part5">
			<view class="orderdetail-part4-part" style="padding-bottom: 40rpx;">
				<view class="orderdetail-part4-part-top">
					<text style="margin-left: 20rpx;">押金</text>
				</view>
				<view class="orderdetail-part4-part-connet" style="height: 180rpx;">
					<view class="orderdetail-part4-part-connet-part">
						<view class="orderdetail-part4-part-connet-part-list" style="color: #7f7f7f;">
							<text style="margin-left: 20rpx;">商品</text>
							<text style="margin-right: 20rpx;">￥1.20</text>
						</view>
						<view class="orderdetail-part4-part-connet-part-list" style="color: #7f7f7f;">
							<text style="margin-left: 20rpx;">芝麻信用免押金额</text>
							<text style="margin-right: 20rpx;">￥1.20</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="orderdetail-part6">
			<view class="orderdetail-part6-part">
				<view class="orderdetail-part6-part-list">
						<text style="margin-left: 20rpx;">到期买断金额</text>
						<text style="margin-right: 20rpx; color: #7f7f7f;">￥0</text>
				</view>
				<view class="orderdetail-part6-part-list">
						<text style="margin-left: 20rpx;">配送方式</text>
						<text style="margin-right: 20rpx; color: #7f7f7f;">寄出包邮/归还包邮</text>
				</view>
			</view>
		</view>
		<view class="orderdetail-part7">
			<view class="orderdetail-part7-part">
				<view class="orderdetail-part6-part-list" style="border-bottom: 0 ;">
						<text style="margin-left: 20rpx;">租赁套餐</text>
						<text style="margin-right: 20rpx; color: #7f7f7f;">租完归还/续租/买断</text>
				</view>
			</view>
		</view>
		<view class="orderdetail-part8">
			<view class="orderdetail-part8-part">
				<view class="orderdetail-part8-part-list" @click="ToAgreement()">
					<text style="margin-left: 20rpx;">租赁协议</text>
					<view class="orderdetail-part8-part-list-right">
						<text style="color: #7f7f7f;margin-right: 20rpx;color: deepskyblue;">查看协议</text>
						<image src="../static/suggest/more.png"  style="width: 24rpx; height: 32rpx;"></image>
					</view>
				</view>
				<view class="orderdetail-part8-part-list">
					<text style="margin-left: 20rpx;">订单编号</text>
					<view class="orderdetail-part8-part-list-right">
						<text style="color: #7f7f7f;margin-right: 20rpx;">1111111111111987987</text>
						<image src="../static/orderdetails/copy.png"  style="width: 24rpx; height: 24rpx;"></image>
					</view>
				</view>
				<view class="orderdetail-part8-part-list">
					<text style="margin-left: 20rpx;">创建时间</text>
					<text style="margin-right: 20rpx; color: #7f7f7f;">2022.12.12 15:11:11</text>
				</view>
			</view>
		</view>
		<view style="width: 100%; height: 40rpx;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			ToAgreement(){
				uni.navigateTo({
					url:'/pagesA/agreement/agreement'
				})
			},
			ToOrderdetail(){
				uni.navigateTo({
					url:'/pagesA/orderdetail/orderdetail2'
				})
			}
		}
	}
</script>

<style>
	page{
		width: 100%;
		height: 100%;
		background-color: #f7f7f7;
	}
	.orderdetail-part1{
		width: 100%;
		height: 420rpx;
	}
	.orderdetail-part1-top{
		width: 100%;
		height: 75%;
		background-image: linear-gradient(90deg, #FF5346, #FA122A);
	}
	.orderdetail-part1-top-tips{
		width: 100%;
		height: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.orderdetail-part1-top-tips-part{
		width: 90%;
		height: 100%;
		margin-top: 80rpx;
	}
	.orderdetail-part1-top-tips-part-title1{
		width: 100%;
		height: 50%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 32rpx;
		color: white;
	}
	.orderdetail-part1-top-tips-part-title2{
		width: 100%;
		height: 50%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 24rpx;
		color: white;
	}
	.orderdetail-part1-bottom{
		width: 100%;
		height: 50%;
		position: relative;
		top:-25%;
	}
	.sureorder-top{
		width: 100%;
		height: 200rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.sureorder-top-part{
		width: 90%;
		height: 80%;
		border-radius: 12rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: white;
	
	}
	.sureorder-top-part-connet{
		width: 100%;
		height: 80%;
		display: flex;
		justify-content: center;
		
	}
	.sureorder-top-part-connet-left{
		width: 100rpx;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.sureorder-top-part-connet-right{
		width: calc(100% - 100rpx );
		height: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.sureorder-top-part-connet-right-icon{
		width: 100rpx;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.sureorder-top-part-connet-right2{
		width: calc(100% - 100rpx );
		height: 100%;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	}
	.sureorder-top-part-connet-right2-title{
		width: 90%;
		height: 40%;
		font-size: 28rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.sureorder-top-part-connet-right2-connet{
		width: 90%;
		height: 60%;
		font-size: 28rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.orderdetail-part2{
		width: 100%;
		height: 320rpx;
		display: flex;
		justify-content: center;
		align-items: flex-start;
	}
	.orderdetail-part2-connet{
		width: 90%;
		height: 88%;
		background-color: white;
		border-radius: 12rpx;
		padding-bottom: 40rpx;
	}
	.orderdetail-part2-connet-top{
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: center;
		border-bottom: #f7f7f7 solid 2rpx;
	}
	.orderdetail-part2-connet-top-left{
		width: 50%;
		height: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 32rpx;
	}
	.orderdetail-part2-connet-top-right{
		width: 50%;
		height: 100%;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.orderdetail-part2-connnet-connet{
		width: 100%;
		height: calc( 100% - 100rpx );
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.orderdetail-part2-connet-connet-img{
		width: 220rpx;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.orderdetail-part2-connnet-connet-text{
		width: calc( 100% - 220rpx );
		height: 100%;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	}
	.orderdetail-part2-connnet-connet-text-list{
		width: 100%;
		height: 25%;
		font-size: 28rpx;
		color: #7f7f7f;
	}
	.orderdetail-part3{
		width: 100%;
		height: 90rpx;
		margin-top: 40rpx;
		display: flex;
		justify-content: center;
	}
	.orderdetail-part3-part{
		width: 90%;
		height: 100%;
		display: flex;
		justify-content: space-between;
		font-size: 32rpx;
		color: #7f7f7f;
		align-items: center;
		background-color: white;
		border-radius: 12rpx;
	}
	.orderdetail-part4{
		width: 100%;
		height: 540rpx;
		margin-top: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.orderdetail-part4-part{
		width: 90%;
		height: 100%;
		background-color: white;
		border-radius: 12rpx;
	}
	.orderdetail-part4-part-top{
		width: 100%;
		height: 90rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 32rpx;
	}
	.orderdetail-part4-part-connet{
		width: 100%;
		height: 360rpx;
		display: flex;
		justify-content: center;
	}
	.orderdetail-part4-part-connet-part{
		width: 90%;
		height: 100%;
		background-color: #f9f9f9;
		border-radius: 12rpx;
		display: flex;
		align-content: space-between;
		flex-wrap: wrap;
	}
	.orderdetail-part4-part-connet-part-list{
		width: 100%;
		height: 80rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		
	}
	.orderdetail-part5{
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 40rpx;
	}
	.orderdetail-part6{
		width: 100%;
		height: 180rpx;
		margin-top: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.orderdetail-part6-part{
		width: 90%;
		height: 100%;
		background-color: white;
		border-radius: 12rpx;
	}
	.orderdetail-part6-part-list{
		width: 100%;
		height: 50%;
		border-bottom: #f7f7f7 solid 2rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 32rpx;
	}
	.orderdetail-part7{
		width: 100%;
		height: 90rpx;
		margin-top: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.orderdetail-part7-part{
		width: 90%;
		height: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-radius: 12rpx;
		background-color: white;
		font-size: 32rpx;
	}
	.orderdetail-part8{
		width: 100%;
		height: 270rpx;
		margin-top: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.orderdetail-part8-part{
		width: 90%;
		height: 100%;
		background-color: white;
		border-radius: 12rpx;
		margin-bottom: 40rpx;
	}
	.orderdetail-part8-part-list{
		width: 100%;
		height: 90rpx;
		background-color: white;
		border-radius: 12rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 32rpx;
		
	}
	.orderdetail-part8-part-list-right{
		width: 60%;
		height: 100%;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin-right: 20rpx;
	}
</style>
